<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Devkit Tools</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      padding: 20px;
      margin: 0 auto;
      max-width: 1000px;
    }
    .container {
      max-width: 1000px; /* 设置最大宽度 */
      margin: 0 auto; /* 水平居中 */
      background-color: #fff; /* 设置背景颜色 */
      padding: 20px;
      border-radius: 8px; /* 设置圆角边框 */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 设置阴影效果 */
    }
    h2 {
      text-align: center;
      margin-bottom: 20px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    tr:hover {
      background-color: #e5e5e5;
    }
    button {
      padding: 8px 12px;
      background-color: #4caf50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  
  <div class="container">
    <h2>devkit 全部工具列表</h2>
    <table id="tools-table">
      <tr>
        <th style="width: 100px;">名称</th>
        <th>介绍</th>
        <th style="width: 100px;">链接</th>
      </tr>
    </table>
  </div>
  <script>
        document.addEventListener("DOMContentLoaded", function() {
            fetch("/get_website_list_tools")
                .then(response => response.json())
                .then(data => {
                    let table = document.getElementById('tools-table');
                    data.forEach(item => {
                      let row = table.insertRow(-1);
                      let cell1 = row.insertCell(0);
                      let cell2 = row.insertCell(1);
                      let cell3 = row.insertCell(2);
                      cell1.innerHTML = item.name;
                      cell2.innerHTML = item.desc;
                      cell3.innerHTML = `<button onclick="window.location.href='${item.url}'">查看详情</button>`;
                    });
                })
                .catch(error => {
                    console.error("获取数据时出错:", error);
                });
        });
  </script>
</body>
</html>
